<template>
  <div style="margin-bottom: 10px">
    <div>
      <p style="font-weight: bolder; fint-size: 14px; margin-bottom: 10px">
        分摊路径对比
      </p>
      <div>
        <el-row>
          <el-col :span="4">
            <div style="margin-top: 25px">
              <el-button v-if="!sceneOne.length">
                {{ sceneCodeList[0].sceneName }}
              </el-button>
            </div>
          </el-col>
          <el-col :span="20" v-if="sceneOne.length && treeDataOne">
            <vue2-org-tree
              :data="treeDataOne"
              node-key="nodeCode"
              :props="defaultProps"
              :horizontal="true"
              @on-expand="onExpand"
              @on-node-mouseover="onMouseover"
              @on-node-mouseout="onMouseout"
              @on-node-click="NodeClick"
            />
          </el-col>
        </el-row>
        <div v-show="BasicSwich" class="floating">
          <!-- <p>编号:{{ BasicInfo.nodeCode }}</p> -->
          <p v-if="BasicInfo.nodeCode != 'root'">
            编号:{{ BasicInfo.nodeCode }}
          </p>
          <p v-else>编号:{{ BasicInfo.sceneCode }}</p>
          <p>名称:{{ BasicInfo.nodeName }}</p>
        </div>
      </div>
      <div>
        <el-row>
          <el-col :span="4">
            <div style="margin-top: 25px">
              <el-button v-if="!sceneTwo.length">
                {{ sceneCodeList[1].sceneName }}
              </el-button>
            </div>
          </el-col>
          <el-col :span="20" v-if="sceneTwo.length">
            <vue2-org-tree
              :data="treeDataTwo"
              :horizontal="true"
              :props="defaultProps"
              node-key="nodeCode"
              @on-node-mouseover="onMouseoverTwo"
              @on-node-mouseout="onMouseoutTwo"
              @on-node-click="NodeClick"
            />
          </el-col>
        </el-row>
        <div v-show="BasicSwichTwo" class="floating">
          <!-- <p>编号:{{ BasicInfoTwo.nodeCode }}</p> -->
          <p v-if="BasicInfoTwo.nodeCode != 'root'">
            编号:{{ BasicInfo.nodeCode }}
          </p>
          <p v-else>编号:{{ BasicInfoTwo.sceneCode }}</p>
          <p>名称:{{ BasicInfoTwo.nodeName }}</p>
        </div>
      </div>
    </div>
    <!-- 运行场景 -->
    <div style="padding: 10px; min-height: 250px">
      <p style="font-weight: bolder; fint-size: 14px; margin-bottom: 10px">
        运行情况对比
      </p>
      <div style="float: left; width: 45%">
        <!--场景一-->
        <h3 style="text-align: center; line-height: 30px">
          {{ sceneCodeList[0].sceneName }}
        </h3>
        <el-table :data="sceneOneTable" style="width: 100%" height="150px">
          <el-table-column
            prop="nodeName"
            show-overflow-tooltip
            label="节点名称"
          />
          <el-table-column
            prop="count"
            show-overflow-tooltip
            label="影响记录数"
          >
          </el-table-column>
          <el-table-column prop="diff" show-overflow-tooltip label="运行时长" />
        </el-table>
      </div>
      <div style="float: right; width: 45%">
        <!--场景二-->
        <h3 style="text-align: center; line-height: 30px">
          <!-- {{ sceneTwoMsg.sceneName }} -->
          {{ sceneCodeList[1].sceneName }}
        </h3>
        <el-table :data="sceneTwoTable" style="width: 100%" height="150px">
          <el-table-column
            prop="nodeName"
            show-overflow-tooltip
            label="节点名称"
          >
          </el-table-column>
          <el-table-column
            prop="count"
            show-overflow-tooltip
            label="影响记录数"
          >
          </el-table-column>
          <el-table-column prop="diff" show-overflow-tooltip label="运行时长">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--  运行场景-->
  </div>
</template>

<script>
import { ruleScene } from "@/api/index";
import { listToTree } from "@/lib/util";
export default {
  props: {
    sceneCodeList: {
      type: Array,
      default: () => {
        [];
      },
    },
  },
  data() {
    return {
      rootNodeOne: {},
      rootNodeTwo: {},
      toShowTree: false,
      sceneOneMsg: {},
      sceneTwoMsg: {},
      BasicSwich: false,
      BasicSwichTwo: false,

      BasicInfo: { id: null, label: null },
      BasicInfoTwo: { id: null, label: null },
      data: {
        // id: 0,
        // label: "XXX科技有限公司",
        // children: [
        // {
        //   id: 2,
        //   label: "产品研发部",
        //   children: [
        //     {
        //       id: 5,
        //       label: "研发-前端",
        //       swtich: "myred",
        //     },
        //     {
        //       id: 6,
        //       label: "研发-后端",
        //       swtich: "myger",
        //     },
        //     {
        //       id: 9,
        //       label: "UI设计",
        //       swtich: 111,
        //     },
        //     {
        //       id: 10,
        //       label: "产品经理",
        //     },
        //   ],
        // },
        // {
        //   id: 3,
        //   label: "销售部",
        //   children: [
        //     {
        //       id: 7,
        //       label: "销售一部",
        //       swtich: "myblue",
        //     },
        //     {
        //       id: 8,
        //       label: "销售二部",
        //       swtich: false,
        //     },
        //   ],
        // },
        // {
        //   id: 4,
        //   label: "财务部",
        // },
        // {
        //   id: 9,
        //   label: "HR人事",
        // },
        // ],
      },
      sceneOne: [],
      sceneOneTable: [],
      sceneTwo: [],
      sceneTwoTable: [],
      horizontal: false,
      collapsable: true,
      expandAll: false,
      treeDataOne: {},
      treeDataTwo: {},
      defaultProps: {
        children: "children",
        label: "nodeName",
      },
    };
  },

  mounted() {},

  methods: {
    init() {
      this.treeDataOne = {};
      this.treeDataTwo = {};
      this.getSceneData();
      this.getSceneDataTwo();
      this.sceneOne = [];
      this.sceneOneTable = [];
      this.sceneTwoTable = [];
    },
    getSceneData() {
      let params = {
        //all: "yes", // 是否获取全部节点
        //curNodeCode: "", // 当前节点编码
        sceneCode: this.sceneCodeList[0].sceneCode, // 场景编码
      };
      ruleScene.queryForList(params).then((res) => {
        if (res.code == 200) {
          this.sceneOneTable = JSON.parse(JSON.stringify(res.datas));
          this.sceneOne = res.datas;
          var _self = this;
          _self.sceneOne.forEach(function (item) {
            if (item.parentNode == null || item.parentNode == "") {
              item.parentNode = "root";
              _self.sceneOneMsg = item.sceneCode;
              _self.rootNodeOne = item.sceneCode;
              (_self.rootNodeOne.nodeCode = "root"),
                (_self.rootNodeOne.parentNode = ""),
                (_self.rootNodeOne.nodeName = _self.rootNodeOne.sceneName);
            }
          });
          _self.sceneOne.push(_self.rootNodeOne);
          let val = listToTree("nodeCode", "parentNode", _self.sceneOne);
          console.log(val, "val");
          _self.treeDataOne = val[0];
          this.$forceUpdate();
          console.log(_self.treeDataOne, " this.treeDataOne");
        } else {
          this.$message.error(res.message);
        }
        // 获取的场景一数据
      });

      // },
    },
    getSceneDataTwo() {
      let param = {
        //all: "yes", // 是否获取全部节点
        //curNodeCode: "", // 当前节点编码
        sceneCode: this.sceneCodeList[1].sceneCode, // 场景编码
      };
      ruleScene.queryForList(param).then((res) => {
        if (res.code == 200) {
          this.sceneTwoTable = JSON.parse(JSON.stringify(res.datas));
          this.sceneTwo = res.datas;
          var _self = this;
          _self.sceneTwo.forEach(function (item) {
            if (item.parentNode == null || item.parentNode == "") {
              _self.sceneTwoMsg = item.sceneCode;
              item.parentNode = "root";
              _self.rootNodeTwo = item.sceneCode;
              (_self.rootNodeTwo.nodeCode = "root"),
                (_self.rootNodeTwo.parentNode = ""),
                (_self.rootNodeTwo.nodeName = _self.rootNodeTwo.sceneName);
            }
          });
          _self.sceneTwo.push(_self.rootNodeTwo);
          let val = listToTree("nodeCode", "parentNode", _self.sceneTwo);
          console.log(val, "val");
          _self.treeDataTwo = val[0];
          console.log(_self.treeDataOne, " this.treeDataOne");
        } else {
          this.$message.error(res.message);
        }
        // 获取的场景一数据
      });
    },

    onMouseout(e, data) {
      this.BasicSwich = false;
    },
    onMouseover(e, data) {
      this.BasicInfo = data;
      this.BasicSwich = true;
      var floating = document.getElementsByClassName("floating")[0];
      console.log(e.clientX, e.clientY, "e.clientXe.clientY");
      floating.style.left = e.clientX - 300 + "px";
      floating.style.top = e.clientY - 10 + "px";
    },
    onMouseoutTwo(e, data) {
      this.BasicSwichTwo = false;
    },
    onMouseoverTwo(e, data) {
      this.BasicInfoTwo = data;
      this.BasicSwichTwo = true;
      var floating = document.getElementsByClassName("floating")[1];
      console.log(e.clientX, e.clientY, "e.clientXe.clientY");
      floating.style.left = e.clientX - 300 + "px";
      floating.style.top = e.clientY - 10 + "px";
    },
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    // 点击触发事件
    NodeClick(e, data) {
      console.log(e, data);
    },
    collapse(list) {
      console.log(list, "list");
      var _this = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    expandChange() {
      this.toggleExpand(this.data, true);
    },
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.floating {
  background: rgba(0, 0, 0, 0.7);
  width: 150px;
  height: 70px;
  line-height: 15px;
  position: absolute;
  color: #fff;
  padding-top: 15px;
  border-radius: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  left: 0;
  top: 0;
  transition: all 0.3s;
  z-index: 999;
  text-align: left;
  font-size: 12px;
}
</style>
